<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			div{
				position: fixed;
				top: 0;
				background: red;
			}
		</style>
	</head>
	<body>
		<canvas id="mycanvas" width="500px" height="500px"></canvas>		<hr />
		<div>111</div>
	</body>
</html>
<script type="text/javascript">
		var c =document.getElementById('mycanvas')
		var ctx = c.getContext('2d')
		
		ctx.fillStyle='#ccc'
		
		// 缩放，水平、竖直，会连着图片坐标点的位置数据一起缩放
		ctx.scale(0.5,2)
		
		ctx.fillRect(100,100,100,100)
		
		var a = c.toDataURL("image/jpeg");
		console.log(a)
		
</script>